2. Getting Started

2.1 Hello World

DOCTYPE

The html pages generated by gsp must generate the doc type as follows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Importing resources

Add the tag <z:resources/> to the head of the layout/main.gsp or any page that you want to use ZK UI Grails plug-ins.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <z:resources/>

Hello World!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World Demo</title>
    <z:resources/>
</head><body>
<z:window title="My First ZK UI Application" border="normal">
    Hello World!
</z:window>
</body>
</html>

2.2 Say Hello in Ajax way

Let us put some interactivity into it.

<z:button label="Say Hello" onClick="Messagebox.show('Hello World! Time now is:'+new Date())"/>

Then, when you click the button, you'll see the following:

The onClick attribute is a special attribute used to add an event listener to the component such that it is invoked when an end user clicks the component. The attribute value could be any legal groovy code.

Here we invoke Messagebox.show(String) to show a message box as depicted above.

Notice that it is not JavaScript,It is Groovy and runs at the server

2.3 Identify a component

A component is a POJO, so you can reference it any way you like. However, ZK provides a convenient way to identify and to retrieve a component: identifier. For example, we named the textbox as input by assigning id to it, as follows.

<z:window title="Property Retrieval" border="normal">
    Enter a property name: <z:textbox id="input"/>
    <z:button label="Retrieve" onClick="Messagebox.show(System.getProperty(input.getValue()))"/>
</z:window>

2.4 A component is a POJO

A component is a POJO. You could instantiate and manipulate directly. For example, we could generate the result by instantiating a component to represent it, and then append it to another component (an instance of vlayout).

<z:window title="Property Retrieval" border="normal">
    Enter a property name: <z:textbox id="input"/>
    <z:button label="Retrieve" onClick="result.appendChild(new Label(System.getProperty(input.getValue())))"/>
    <z:vlayout id="result"/>
</z:window>

Similarly you could change the state of a component directly. All modifications will be synchronized back to the client automatically.

<z:window title="Property Retrieval" border="normal">
    Enter a property name: <z:textbox id="input"/>
    <z:button label="Retrieve" onClick="result.setValue(System.getProperty(input.getValue()))"/>
    <z:separator/>
    <z:label id="result"/>
</z:window>

2.5 Separating code from user interface

Embedding Groovy code in a gsp page is straightforward and easy to read. However, in a production environment, it is usually better to separate the code from the user interfaces. In additions, the compiled Groovy code runs much faster than the embedded code which is interpreted at the run time.

To separate code from UI, we could implement a Composer

use create-composer command

grails create-composer zkuidemo.PropertyRetriever

A composer called PropertyRetrieverComposer will be created in the grails-app/composers directory

Modify the generated PropertyRetrieverComposer as follows

package zkuidemoimport org.zkoss.zk.ui.Component
import org.zkoss.zk.ui.event.Event
import org.zkoss.zul.Label
class PropertyRetrieverComposer {
    def afterCompose = {Component target ->
        target.addEventListener("onClick", new org.zkoss.zk.ui.event.EventListener() { //add a event listener in Groovy
            public void onEvent(Event event) {
                String prop = System.getProperty(target.getFellow("input").getValue())
                target.getFellow("result").appendChild(new Label(prop))
            }
        });
    }
}

The above code can be simplified as follows

package zkuidemoimport org.zkoss.zk.ui.Component
import org.zkoss.zk.ui.event.Event
import org.zkoss.zul.Label
class PropertyRetrieverComposer {
    def afterCompose = {Component target ->
        target.addEventListener("onClick") {Event event ->
            String prop = System.getProperty(target.getFellow("input").value)
            target.getFellow("result").appendChild(new Label(prop))
        }
    }
}

Then, we could associate the Composer (zkuidemo.PropertyRetrieverComposer) with a component by use of the apply attribute as shown below.

<z:window title="Property Retrieval" border="normal">
    Enter a property name: <z:textbox id="input"/>
    <z:button label="Retrieve" apply="zkuidemo.PropertyRetrieverComposer"/>
    <z:separator/>
    <z:vlayout id="result"/>
</z:window>